<style>
    .warning-msg { }
    .warning-msg-content { background-color: #FFFFCC; border: 1px solid #FFFF33; padding: 10px; margin-bottom: 15px; color: #666; }
        .warning-msg-content i { display: inline-block; font-size: 16px; margin-right: 5px; color: red; }
        .warning-msg-content p { display: inline-block; }
        .warning-msg-content a { color: #20a53a; }
            .warning-msg-content a:hover { color: #23527c; }
</style>
<body>
    <script type="text/html" template lay-done="layui.data.done(d);">
        <div class="layui-form coreshop-form layui-form-pane" lay-filter="LAY-app-CoreCmsEnterprise-MapForm" id="LAY-app-CoreCmsEnterprise-MapForm">
            <input type="hidden" name="coordinate" value="{{d.params.data.oldData}}">

            <div class="layui-form-item">
                <label for="tags" class="layui-form-label">请输入地址</label>
                <div class="layui-input-inline layui-inline-10">
                    <input name="tags" class="layui-input" lay-reqText="请输入标签" placeholder="请输入标签" id="place" style="z-index: 99999999" />
                </div>
                <div class="layui-form-mid" style="padding: 0 !important;float: right">
                    <button type="button" id="save-map" class="layui-btn" lay-submit lay-filter="formDemo">保存当前位置</button>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <div class="layui-input-inline layui-inline-10" id="container" style="min-width: 100%; min-height: 450px;">
                </div>
            </div>
        </div>
    </script>
</body>
<script>
    var $;
    var debug = layui.setter.debug;
    var coordinateBoxIdName;
    var addressBoxIdName;
    layui.data.done = function (d) {
        //开启调试情况下获取接口赋值数据
        if (debug) { console.log(d.params.data); }

        coordinateBoxIdName = d.params.data.coordinateBoxIdName;
        addressBoxIdName = d.params.data.addressBoxIdName;

        layui.use(['admin', 'form', 'coreHelper'], function () {
            $ = layui.$;
            var setter = layui.setter, admin = layui.admin, coreHelper = layui.coreHelper, form = layui.form;
            var layer = layui.layer;

            var cityLocation, map, marker, center = null;
            var markerImage = "http://api.map.baidu.com/images/marker_red_sprite.png";
            var preLocationCenter = $("input[name=coordinate]").val();
            if (preLocationCenter == '') {
                cityLocation = new qq.maps.CityService({
                    complete: function (result) {
                        center = new qq.maps.LatLng(result.detail.latLng.lat, result.detail.latLng.lng);
                        setMap(center);
                    }
                });
                cityLocation.searchLocalCity();
            } else {
                var arr = preLocationCenter.split(',');
                if (arr.length < 2) {
                    parent.layer.msg("坐标位置错误");
                    return false;
                }
                center = new qq.maps.LatLng(arr[0], arr[1]);
                setMap(center);
            }
            function setMap(center) {
                //DOTO 1.350264,103.832503
                center = new qq.maps.LatLng(19.922857018224137, 110.33684852238307);
                map = new qq.maps.Map(document.getElementById('container'), {
                    center: center,
                    zoom: 13
                });

                var size = new qq.maps.Size(20, 27);
                var origin = new qq.maps.Point(0, 0);
                var icon = new qq.maps.MarkerImage(markerImage, size, origin);
                //创建一个Marker
                marker = new qq.maps.Marker({
                    icon: icon,
                    position: center,
                    animation: qq.maps.MarkerAnimation.DOWN,
                    map: map,
                    title: '选择企业位置'
                });

                var jump = function (event) {
                    marker.setPosition(event.latLng);
                };
                qq.maps.event.addListener(map, 'click', jump);

                //搜索框提示
                var ap = new qq.maps.place.Autocomplete(document.getElementById('place'), {
                    offset: new qq.maps.Size(0, 5),
                    location: '北京市',
                    zIndex: 99999999
                });
                var keyword = "";

                //调用Poi检索类。用于进行本地检索、周边检索等服务。
                var searchService = new qq.maps.SearchService({
                    complete: function (results) {
                        if (results.type === "CITY_LIST") {
                            searchService.setLocation(results.detail.cities[0].cityName);
                            searchService.search(keyword);
                            return;
                        }
                        var pois = results.detail.pois;
                        var latlngBounds = new qq.maps.LatLngBounds();
                        for (var i = 0, l = pois.length; i < l; i++) {
                            var poi = pois[i];
                            latlngBounds.extend(poi.latLng);
                            var marker = new qq.maps.Marker({
                                map: map,
                                position: poi.latLng
                            });

                            marker.setTitle(poi.name);
                        }
                        map.fitBounds(latlngBounds);
                    }
                });
                //添加监听事件
                qq.maps.event.addListener(ap, "confirm", function (res) {
                    console.log('查询地址');
                    keyword = res.value;
                    searchService.search(keyword);
                });
            }

            $("#save-map").on('click', function () {
                parent.$("#" + coordinateBoxIdName).val(marker.position.lat + ',' + marker.position.lng);
                if (addressBoxIdName) {
                    setName(marker.position.lat, marker.position.lng);
                }
                //parent.layer.closeAll();
                parent.layer.close(layer.index);
            });

            form.render(null, 'LAY-app-CoreCmsEnterprise-MapForm');
        });
    };

    function getAddressLocation(address) {
        const url = `http://api.map.baidu.com/geocoding/v3/?address=${encodeURIComponent(address)}&output=json&ak=UBe8DducOHhiBSPvdtDc9UVxMM4W1DfZ`;

        return new Promise((resolve, reject) => {
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 0) {
                        const location = {
                            latitude: data.result.location.lat,
                            longitude: data.result.location.lng
                        };
                        resolve(location);
                    } else {
                        reject('Geocoding was not successful for the following reason: ' + data.message);
                    }
                })
                .catch(error => {
                    reject(error);
                });
        });
    }


    function setName(lat, lng) {
        geocoder = new qq.maps.Geocoder({
            complete: function (result) {
                parent.$("#"+addressBoxIdName).val(result.detail.address);
            }
        });
        var coord = new qq.maps.LatLng(lat, lng);
        geocoder.getAddress(coord);


        // 调用示例
        getAddressLocation('北京市朝阳区').then(location => {
            console.log('地址',location.latitude, location.longitude);
        }).catch(error => {
            console.error(error);
        });

    }
</script>